<template>
  <t-row :gutter="[24, 24]">
    <t-col :flex="3">
      <div class="user-left-greeting">
        <div>
          Hi,{{ userStore.userInfo?.nickname }}
          <span class="regular"> {{ t('pages.user.markDay')}}
            {{ days }}天 {{ hours }}小时 {{ minutes }}分 {{ seconds }}秒</span>
        </div>
        <t-avatar :image="fileView(userStore.userInfo?.avatar)" />
      </div>
        <t-tabs :default-value="1">
          <t-tab-panel :value="1" label="信息修改">
            <detail />
          </t-tab-panel>
          <t-tab-panel :value="2" label="密码修改">
            <change />
          </t-tab-panel>
        </t-tabs>
    </t-col>
  </t-row>
</template>
<script setup lang="ts">
import { t } from '@/locales';
import { useUserStore } from '@/store';
import { fileView } from '@/api/upload';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import change from './components/change.vue'
import detail from './components/detail.vue'
import dayjs from 'dayjs';


const userStore = useUserStore();
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);

onMounted(() => {
  const updateTime = () => {
    if (userStore.userInfo?.createTime) {
      const creationDate = dayjs(userStore.userInfo.createTime);
      const currentDate = dayjs();
      const diffInSeconds = currentDate.diff(creationDate, 'second');

      days.value = Math.floor(diffInSeconds / (3600 * 24));
      hours.value = Math.floor((diffInSeconds % (3600 * 24)) / 3600);
      minutes.value = Math.floor((diffInSeconds % 3600) / 60);
      seconds.value = diffInSeconds % 60;
    }
  };

  updateTime(); // 初始化
  const intervalId = setInterval(updateTime, 1000); // 每秒更新一次

  onUnmounted(() => {
    clearInterval(intervalId); // 组件卸载时清除定时器
  });
});



</script>

<style lang="less" scoped>
@import './index.less';

.t-descriptions {
  margin-top: 24px;
}
</style>
